<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 数组中新增了 map 和 reduce 方法

        // 1. map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        let arr = [2, 4, -6, 7, 10];
        arr = arr.map(r => r * 2); // 就类似于 Java8 的新特性 Stream 流，这是这不需要调用Collector进行收集
        console.log('数组map函数处理之后的值：', arr); // 数组map函数处理之后的值： [4, 8, -12, 14, 20]


        // 2. reduce
        /*
        语法：
            arr.reduce(callback,[initialValue])
            reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元
            素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调
            用 reduce 的数组。

            callback （执行数组中每个值的函数，包含四个参数）
                1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
                2、currentValue （数组中当前被处理的元素）
                3、index （当前元素在数组中的索引）
                4、array （调用 reduce 的数组）
            initialValue （作为第一次调用 callback 的第一个参数。）
        */
        let reduceArr = [2, 4, 6, 8];
        // 无初始值累加
        let reduceResult1 = reduceArr.reduce((pre, curr, index) => {
            console.log('上次处理之后的值：' + pre + '，本次需要处理的值：' + curr + "，本次处理的数组索引：" + index);
            return pre + curr;
        });
        console.log('reduce无初始值处理之后的值：', reduceResult1); // reduce无初始值处理之后的值： 20

        // 有初始值累加
        let reduceResult2 = reduceArr.reduce((pre, curr, index) => {
            console.log('上次处理之后的值：' + pre + '，本次需要处理的值：' + curr + "，本次处理的数组索引：" + index);
            return pre + curr;
        }, 10);
        console.log('reduce有初始值处理之后的值：', reduceResult2); // reduce有初始值处理之后的值： 30

        // 3. map 和 reduce 联合处理，先对数组中每个元素*2，然后再求和
        let mapUnitReduceArr = [1, 2, 3];
        let result = mapUnitReduceArr.map(r => r * 2).reduce((pre, curr) => pre + curr);
        console.log('map 和 reduce 联合处理', result); // map 和 reduce 联合处理 12
    </script>
</body>

</html>